@charset 'utf-8';
body{
    box-sizing: border-box;
    height: 1080px;
    padding-top: 30px;
    background-image: url(../images/index/bg.png);
    background-repeat: no-repeat;
    .logo{
        margin: 0 auto;
        width: 89px;
        height: 89px;
        background-image: url(../images/index/logo.png);
    }
    .serial{
        margin: 0 auto;
        width: 375px;
        height: 55px;
        background-image: url(../images/index/biaoti.png);
        margin-top: 50px;
    }
    .school{
        margin: 0 auto;
        width: 375px;
        margin-top: 28px;
        text-align: center;
        color: #494949;
        font-size: 14px;
        letter-spacing:5px;
    }
    .about{
        position: relative;
        margin: 0 auto;
        width: 295px;
        height: 69px;
        background-image: url(../images/index/button.png);
        margin-top: 444px;
        line-height: 62px;
        font-family: 'STLiti';
        text-align: left;
        color: #d0d0d0;
        font-size: 25px;
        text-indent: 45px;
        cursor: pointer;
        left: 58px;
    }
    .navigator{
        margin: 0 auto;
        width: 820px;
        height: 220px;
        margin-top: 60px;
        li{
            float: left;
            width: 230px;
            height: 220px;
            margin-right: 65px;
            a{
                text-decoration: none;
            }
            cursor: pointer;
            &:last-child{
                margin-right: 0;
            }
            .icon{
                width: 171px;
                height: 211px;
                margin: 0 auto;
            }
            .title-main{
                position: relative;
                top: -48px;
                font-weight: bold;
                font-family: 'STLiti';
                text-align: center;
                color: #454140;
                font-size: 28px;
            }
            .title-sub{
                position: relative;
                top: -42px;
                font-family: 'STLiti';
                font-weight: bold;
                text-align: center;
                color: #454140;
                font-size: 22px;
            }
            &.history{
                .icon{
                    background-image: url(../images/index/icon1.png);
                }
            }
            &.station{
                .icon{
                    background-image: url(../images/index/icon2.png);
                }
            }
            &.weather{
                .icon{
                    background-image: url(../images/index/icon3.png);
                }
            }
        }
    }
}
